$(document).ready(function() {
    // Hide all collapsible elements by default (everything with class "collapsible").
    $('.collapsible').hide();
    // For all buttons with class "collapse-button" inside an element with class "collapse-container",
    // cause a click of that button to toggle all elements inside the container with class "collapsible".
    $('.collapse-container .collapse-button').click(function() {
        if ($(this).text() === '▼') {
            $(this).text('▲');
        } else {
            $(this).text('▼');
        }
        $(this).closest('.collapse-container').find('.collapsible').toggle();
    });
    
    /*
     *  Example:
     * 
     * <div class="collapse-container">
     *     <button class="collapse-button">Toggle</button>
     *     <p>...</p>
     *     <div class="collapsible">...</div>
     * </div>
     * <div class="collapsible">...</div>
     * 
     * The first div with class "collapsible" will be affected because it's inside 
     * the same "collapse-container" as the button, but the second div with
     * class "collapsible" will not be affected because it's outside.
     */
});